<template>
	<view class="content page" id="order_detail" style="padding-bottom: 0;">
		<back-top v-if='toTop'></back-top>
		<view class="receipt_addr mb_03">
			<!-- 快递 start -->
			<view class="logistics_addr flex-box cloumn flex-between" v-if='detail.delivery == 1'>
				<image src="/static/line.jpg" mode="widthFix"></image>
				<view class="r_addr_info">
					<p class="r_addr_info_t">{{detail.uname}}&nbsp;&nbsp;&nbsp;&nbsp;{{detail.utel}}</p>
					<view class="r_addr_info_c">{{detail.address}}</view>
				</view>
				<image src="/static/line.jpg" mode="widthFix"></image>
			</view>
			
			<!-- 自提 start -->
			<view class="store_addr" v-if='detail.delivery == 2'>
				<view class="r_addr_info">
					<view class="r_addr_info_t" @click="telPhone(detail.shopMobile)">{{detail.shopName?detail.shopName:''}}店铺名称&nbsp;&nbsp;&nbsp;&nbsp;{{detail.shopMobile?detail.shopMobile:''}}023-235815</view>
				</view>
			</view>
			
			<view class="infobar2 flex-box">
				<p class="infobar2_t">备注信息：</p>
				<view class="infobar2_c flex">{{detail.remarks?detail.remarks:'无'}}</view>
			</view>
		</view>

		<view class="logistics flex-box align-center" v-if='detail.courier_name'>
			<text class="iconfont icon-wuliu"></text>
			<view class="flex">
				<p>{{detail.courier_name}}</p>
				<p class="logistics_num">{{detail.courier_num}}</p>
			</view>
		</view>
		<view class="logistics_item" v-if='expressMsg && expressMsg.length > 0'>
			<view class="logistics_list" v-for="(wl,index) in expressMsg" :key='index'>
				<view class="left_title">
					<view class="orderType">{{wl.context}}</view>
					<!-- <view class="orderDescribe">请耐心等待上家确认</view> -->
				</view>
				<view class="right_time">
					<view class="">{{wl.date}}</view>
					<view class="">{{wl.time}}</view>
				</view>
			</view>
		</view>
		<empty type='1' v-if='noData' msg='没有找到相关的物流信息哦'></empty>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				noData: false,
				toTop:false,
				navFixed:false,
				expressMsg:[],// 物流信息
				detail:{},// 订单详情
			}
		},
		onShow(){
		
		},
		onLoad(options) {
			that = this
			var order_id = options.order_id; // 订单id
			 /** *订单详情* **/
			 that.$http.get({
			 	url: '/singleSaleManageApi/orderDetail',
			 	data:{
			 		shop_id: uni.getStorageSync('store_id'),
			 		order_id: order_id
			 	}
			 }).then(res => {
			 	if(res.errcode == 100 && res.data){
			 		that.detail = res.data
			 	}
			 })
			 
			 // #ifdef H5
			 this.$common.H5HideShare()
			 // #endif
			
			/** *查看物流* **/
			 that.$http.post({
			 	url: '/zzj_singleSaleApi/expressinfo',
			 	data: {
			 		order_id: order_id
			 	}
			 }).then(res => {
			 	if(res.data){
			 		that.expressMsg = res.data;
			 		that.expressMsg.forEach((item,index)=>{
			 			item.date = item.ftime.substring(5,7)+'月'+item.ftime.substring(8,10)+"日";
			 			item.time = item.ftime.substring(14,19)
			 		})
			 	}
				if(!that.expressMsg || that.expressMsg.length < 1){
					that.noData = true
				}
			 })
		},
		onPageScroll(e){
			if(e.scrollTop > 200){
				that.toTop = true;
			} else {
				that.toTop = false
			}
			if(e.scrollTop > 583){
				that.navFixed = true
			} else {
				that.navFixed = false
			}
		},
		methods:{
			telPhone:function(phoneNumber){
				uni.makePhoneCall({
					phoneNumber:phoneNumber
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 边距 */
	.mb_03{
		margin-bottom: 30rpx;
	}
	#order_detail{
		padding-bottom: 100upx;
	}
	
	#order_detail .odr_dtl_state{
		height: 200upx;
		margin-bottom: 30upx;
		padding: 0 30upx;
		background: #ffffff;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.odr_dtl_state .odr_dtl_state_text{
		width: 530upx;
	}
	
	.odr_dtl_state_text .text1{
		margin-bottom: 20upx;
	}
	.r_addr_info{
		padding: 24rpx 30rpx;
		background: #ffffff;
		.r_addr_info_t{
			margin:6rpx 0 10rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			font-family: "arial";
		}
	}
	.infobar2{
		background: #ffffff;
		margin-top: 20rpx;
		padding: 24rpx 30rpx;
	}
	.logistics_addr{
		position: relative;
		background: #ffffff;
		image{
			width: 100%;
			height: 4rpx;
		}
	}
	#order_detail .agoods{
		margin-top: 30upx;
	}
	
	#order_detail .order_dtl_num{
		position: relative;
	}
	
	.order_dtl_num .copy_btn{
		color: #0966ff;
		position: absolute;
		top: 20upx;
		right: 0;
		z-index: 1;
	}
	
	#order_detail .logistics{
		border-radius: 10px;
		margin-bottom: 30upx;
		padding: 30upx;
		background-position-x: 30upx;
		background-color: #FFFFFF;
		.icon-wuliu{
			font-size: 36rpx;
			margin-right: 10rpx;
		}
	}

	
	#order_detail .store_nav{
		border-radius: 10px;
		margin-bottom: 30upx;
		padding: 30upx 30upx 30upx 90upx;
		background-position-x: 30upx;
	}
	
	#order_detail .store_nav .store_nav_tel{
		top: 30upx;
		left: 90upx;
	}
	
	.logistics_list{
		line-height: 40upx;
		color: #999999;
		overflow: hidden;
		position: relative;
		padding-left: 60upx;
		padding-bottom: 30upx;
	}
	.logistics_list:last-child:after{
		display: none;
	}
	.orderType{
		color: #333333;
		font-size: 28upx;
	}
	.orderDescribe{
		font-size: 24upx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.left_title{
		float: left;
		width: 80%;
	}
	.right_time{
		float: right;
		width: 20%;
		text-align: right;
	}

	.logistics:after{
		display: none;
	}
	.logistics_item{
		border-radius: 10px;
		margin-bottom: 15px;
		padding: 30upx 44upx 30upx 30upx;
		background: #FFFFFF;
	}
	.logistics_list:before,
	.logistics_list:after{
		content: '';
		position: absolute;
		border: 1px solid #ff4b4e;
		box-sizing: border-box;
	}
	.logistics_list:after{
		width: 2upx;
		height: 90%;
		background: #ff4b4e;
		content: '';
		position: absolute;
		border: 1px solid #ff4b4e;
		box-sizing: border-box;
		left: 14upx;
		bottom: 0;
	}
	.logistics_list:before{
		width: 30upx;
		height:30upx;
		background: #FFFFFF;
		border-radius: 100%;
		left: 0;
		top: 0;
		z-index: 5;
	}
	
</style>
